<template>
	<div>
		<slot v-if="!isTimeUp"></slot>
	</div>
</template>

<script lang="ts" setup>
	import { ref, onMounted, defineProps, withDefaults, defineEmits } from 'vue'

	const props = withDefaults(
		defineProps<{
			duration: number
			after?: boolean
		}>(),
		{
			duration: 10000,
			after: false,
		},
	)

	const emit = defineEmits<{
		(e: 'time-up'): void
	}>()

	const isTimeUp = ref(props.after)

	const startTimer = () => {
		setTimeout(() => {
			isTimeUp.value = !isTimeUp.value
			emit('time-up')
		}, props.duration)
	}

	onMounted(startTimer)
</script>

<style scoped>
	/* 可以添加组件样式 */
</style>
